<template>
  <div id="nav">
    <!-- 头部 -->
    <header>
     
      <div class="txt">
        <div class="t-left">欢迎来到在线商城!</div>
        <div class="t-right">
          <a href="">{{this.name}}</a>
          <span @click="ext">{{this.log}}</span>

          <span @click="reg">注册</span>
        </div>
      </div>
    </header>
    <!-- 过渡条 -->

    <div class="banner">
      <div class="sch">
        <div><img src="../public/img/logo.png" alt="" /></div>

       

        <div class="t-pic">
          <router-link to="/shopcar"
            ><img
              src="../public/img/shopcar.png"
              alt="购物车"
              width="26px"
              height="26px"
              title="购物车"
          />
          <span>{{$store.getters.getCount}}</span>
          
          </router-link>
          <router-link to="/login"
            ><img
              src="../public/img/mine.png"
              alt=""
              width="26px"
              height="26px"
              title="登入/登出"
          /></router-link>
        </div>
      </div>
    </div>

    <!-- 导航条 -->
    <div class="cor">

    <div id="nav-container">
      <ul class="nav-t">
        <li class="nav-t2">
          <a href="">网页导航</a>
        </li>
        <li>
          <router-link to="/Home" class="home"
            >首页 <span><img src="../public/img/jt.png" alt="" /></span
          ></router-link>
          <div>
            <a href="##" @click="jump">特色产品</a>
            <a href="##" @click="jump1">特别活动</a>
            <a href="##" @click="jump2">商品展示</a>
          </div>
        </li>
        <li>
          <router-link to="/shop"
            >商店<span><img src="../public/img/jt.png" alt="" /></span
          ></router-link>
           <div>
           <a href="">热销产品</a>
           <a href="">新品发售</a>
           <a href="">特价商品</a>
          </div>
        </li>
        <li>
          <router-link to="##"
            >板块分类<span><img src="../public/img/jt.png" alt="" /></span
          ></router-link>
          <div>
            <router-link to="/login">登录界面</router-link>
            <router-link to="/shopcar">购物车</router-link>
            <router-link to="/adds">收货地址</router-link>
            <router-link to="/adds">我的订单 </router-link>
          </div>
        </li>
        <li><router-link to="/new">家具新闻</router-link></li>
        <li><router-link to="/about">关于</router-link></li>
      </ul>
    </div>
</div>
    <router-view />

    <!-- 底部—————————————————————————————————————— -->
    <footer>
      <div>
        <a href="">
          <img
            src="../public/img/wx.png"
            alt="微信"
            width="26px"
            height="26px"
          />
        </a>
        <a href=""
          ><img src="../public/img/QQ.png" alt="QQ" width="26px" height="26px"
        /></a>
        <a href=""
          ><img src="../public/img/wb.png" alt="" width="26px" height="26px"
        /></a>
      </div>
      <div>
        <p>Copyright © 2020 Cleric by S. All rights reserved</p>
      </div>
    </footer>

    <div @click="back" id="back">
      <i class="iconfont icon-shang"></i>
    </div>
  </div>
</template>

<style scoped lang="less">
#back{
  cursor: pointer;
  width: 60px;
  
  height: 60px;
  border-radius: 50px;
  background-color: #333;
  color: #fff;
  position: fixed;
  top: 800px;
  right: 20px;
  text-align: center;
  line-height: 55px;
  font-weight: 100px;
  transition: all linear .3s;
  display: none;
  &:hover{
      background-color: #7f87ab;

  }
}
a {
  text-decoration: none;
  font-size: 16px;
}
#nav {
  .cor{
    background-color: #f3f3f3;
  }

  header {
    height: 68px;
    background-color: #7f87ab;
    width: 100%;
    .txt {
      width: 1200px;
      margin: auto;
      height: 68px;
      background-color: #7f87ab;
      letter-spacing: 1px;
      .t-left {
        line-height: 68px;
        font-size: 16px;
        font-family: system-ui;
        color: #fff;
        letter-spacing: 1px;
      }
      .t-right {
        float: right;
        margin-top: -48px;
          span{
            color:#fff;
            font-size:12px;
            margin-left: 30px;
            cursor: pointer;
          }

        a {
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }

  .banner {
    width: 100%;
    height: 154px;
    background-color: #fff;
    padding: 50px 0;

    .sch {
      width: 1200px;
      height: 53px;
      margin: auto;
   
      position: r;
   
      .t-pic {
        float: right;
        margin-top: -40px;
        a {
          margin-right: 20px;
        }
        a:first-child {
          margin-top: 2px;
          position: relative;
          span{
            display: inline-block;
            width: 20px;
            height: 20px;
            left: 15px;
            text-align: center;
            line-height: 20px;
            color: #ffffff;
            border-radius: 10px;
            position: absolute;
            background-color:#7f87ab;
          }
        }
      }
    }
  }
  footer {
    margin-top: 100px;
    width: 100%;
    height: 200px;
    background-color: #f3f3f3;
    div:first-child {
      line-height: 200px;
      height: 130px;
      width: 200px;
      margin: auto;
      display: flex;
      justify-content: space-between;
    }
    div:nth-child(2) {
      text-align: center;
    }
  }
}

#nav-container {
 
  height: 62px;
  padding-right: 15px;

  margin-right: auto;
  margin-left: auto;
  width: 1200px;
  display: flex;
  justify-content: right;
  ul {
    display: flex;
    li {
      &:hover {
        div {
          visibility: visible;
          opacity: .8;
          box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
          top: 61px;
        }
      }

      list-style: none;
      position: relative;
      div {
        position: absolute;
        top: 71px;

        width: 175px;
        z-index: 10001;
        visibility: hidden;
        opacity: 0;
        transition: all linear 0.3s;
        background-color: #fff;

        a {
          display: block;
          padding: 11px 20px;
          color: #555555;
          &:hover {
            background-color: #f1f1f1;
            cursor: pointer;
          }
        }
      }

      a {
        padding: 18px 20px;
        display: inline-block;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: 400;
        text-decoration: none;
        color: #000;
      }
    }
  }
  .nav-t2 {
    background-color: #7f87ab;
    letter-spacing: 2px;
    height: 62px;

    a {
      color: #fff;
      font-weight: 400;
    }
    .home {
      position: relative;
    }
  }
}
</style>


<script>

export default {
  data() {
    return {
      log:'登录',
      name:'',
      allArea:[],
            pic: [
        { path: "img/sp.jpg", name: "音响1", oldpce: "65", newpce: "60" },
        { path: "img/sp1.jpg", name: "音响2", oldpce: "75", newpce: "70" },
        { path: "img/sp2.jpg", name: "音响3", oldpce: "105", newpce: "99" },
        { path: "img/sp3.jpg", name: "音响4", oldpce: "921", newpce: "900" },
        { path: "img/sp4.jpg", name: "音响5", oldpce: "333", newpce: "300" },
        { path: "img/sp5.jpg", name: "音响6", oldpce: "213", newpce: "199" },
        { path: "img/sp6.jpg", name: "音响7", oldpce: "132", newpce: "99" },
        { path: "img/sp7.jpg", name: "音响9", oldpce: "94", newpce: "88" },
         { path: "img/sp4.jpg", name: "音响10", oldpce: "76", newpce: "69" },
        { path: "img/sp5.jpg", name: "音响11", oldpce: "72", newpce: "67" },
        { path: "img/sp6.jpg", name: "音响12", oldpce: "98", newpce: "88" },
        { path: "img/sp7.jpg", name: "音响13", oldpce: "111", newpce: "90" },
      ],

    };
  },
  methods:{
      back(){
       
   $('html,body').animate({'scrollTop':'0'},400,)
  
      },
        //特色产品跳转
  jump(){
     if (this.$route.path=='/Home') {
        $('html,body').animate({'scrollTop':'2626'},500,)
 }else{
   this.$router.push('/Home')
    $('html,body').animate({'scrollTop':'2626'},500,)
 }
  },
 //特别活动跳转
    jump1(){
     if (this.$route.path=='/Home') {
        $('html,body').animate({'scrollTop':'1966'},500,)
 }else{
   this.$router.push('/Home')
    $('html,body').animate({'scrollTop':'2626'},500,)
 }
  },

  //商品展示跳转
    jump2(){
     if (this.$route.path=='/Home') {
        $('html,body').animate({'scrollTop':'3944'},500,)
 }else{
   this.$router.push('/Home')
    $('html,body').animate({'scrollTop':'2626'},500,)
 }
  },

ext(){
  if (this.log=='退出') {
      sessionStorage.removeItem('name');
        window.location.href=window.location.href

  }else if (this.$route.path!='/login') {
    this.$router.push('/login')
  }


},

reg(){
   this.$router.push('/login')
}


  },
   mounted() {
$(window).scroll(function(){
			if($(window).scrollTop()>300){
				$('#back').fadeIn(0);
				}
				else{$('#back').fadeOut(0);}
			
			});

 if (this.$route.path=='/Home') {
        window.addEventListener('scroll', this.getHeight)
 };
 

    
  var flag =  sessionStorage.getItem('name')


    if (flag) {
       this.name="欢迎"+flag;
      this.log = "退出"
       
    }else{
     
    }


       var name = sessionStorage.getItem("name");
    this.name = name;

    this.$axios
      .post("http://localhost:520/shopcar", "name=" + name)
      .then((data) => {
        console.log(data.data)
          var goods =  data.data;
    
        
      this.$store.commit("addshop",goods)
      
      });


   },

}
</script>